<template>
	<view>


		<!-- 一、搜索框 -->
		<ugo-search />

		<view class="abc">
			<!-- 二、轮播图 -->
			<view>
				<swiper class="banner" indicator-dots autoplay circular>
					<swiper-item v-for="item in bannerList" :key="item.goods_id">
						<image :src="item.image_src" mode="widthFix" />
					</swiper-item>
				</swiper>
			</view>

			<!-- 三、入口导航 -->
			<view class="nav">
				<navigator url="/pages/category/category" open-type="switchTab" hover-class="none" v-for="item in navList"
					:key="item.name">
					<image :src="item.image_src" mode="scaleToFill" />
				</navigator>
			</view>

			<!-- 四、楼层 -->
			<view class="floor" v-for="(item, index) in floorList" :key="index">
				<!-- 楼层标题 -->
				<view class="floor-title">
					<image :src="item.floor_title.image_src" mode="widthFix" />
				</view>
				<!-- 楼层主题 -->
				<view class="floor-main">
					<navigator url="/pages/index/index" open-type="navigate" hover-class="none" v-for="goods in item.product_list"
						:key="goods.name">
						<image :src="goods.image_src" :style="'width:' + goods.image_width + 'rpx'" mode="scaleToFill" />
					</navigator>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			bannerList: [],
			navList: [],
			floorList: []
		}
	},
	onLoad() {
		this.getBanner()
		this.getNav()
		this.getFloor()
	},

	// 监听用户下拉动作
	async onPullDownRefresh() {
		this.keyword = ''
		// this.bannerList = []
		this.navList = []
		this.floorList = []

		await Promise.all([this.getBanner(), this.getNav(), this.getFloor()])
		uni.stopPullDownRefresh()
	},

	methods: {

		// 获取轮播图
		async getBanner() {
			const res = await uni.$u.http.request({
				method: 'GET',
				url: '/home/swiperdata'
			})
			this.bannerList = res.data.message
		},

		// 获取导航
		async getNav() {
			const res = await uni.$u.http.request({
				method: 'GET',
				url: '/home/catitems'
			})
			this.navList = res.data.message
		},

		// 获取楼层
		async getFloor() {
			const res = await uni.$u.http.request({
				method: 'GET',
				url: '/home/floordata'
			})
			this.floorList = res.data.message
		}
	},
}
</script>

<style lang="scss">
.abc {
	height: calc(100vh - var(--window-bottom) - var(--window-top));
}

// 搜索框
.search {
	padding: 10rpx 25rpx;
	background-color: #eb4450;
}

// 轮播图
.banner,
.banner image {
	width: 750rpx;
	height: 340rpx;
}

// 导航
.nav {
	display: flex;
	justify-content: space-around;
	padding: 12rpx 0 42rpx;

	image {
		width: 128rpx;
		height: 140rpx;
	}
}

// 楼层样式
.floor {
	.floor-title {
		image {
			width: 750rpx;
		}
	}

	.floor-main {
		image {
			float: left;
			height: 188rpx;
			margin-left: 15rpx;
			margin-bottom: 10rpx;
		}

		navigator:nth-child(1) image {
			height: 386rpx;
		}
	}
}
</style>
